<template>
  <div>
    <div class="top" v-if="xiangqi">
      <div class="lef">
        <img src="http://datong.crmeb.net/public/uploads/attach/2019/03/28/5c9ccca12638a.gif" alt="" />
      </div>
      <div class="rig">
        <span>商家未发货,请耐心等待</span>
        <span>{{ time }}</span>
      </div>
    </div>
    <van-steps :active="active">
      <van-step>待付款</van-step>
      <van-step>待发货</van-step>
      <van-step>待收货</van-step>
      <van-step>待完成</van-step>
      <van-step>已完成</van-step>
    </van-steps>
 
    <!-- <div class="dibu"><img src="../assets/dibu.jpg" alt="" /></div> -->
    <div class="die"></div>
    <div class="deleshang">
      <p>共{{leng}}件商品</p>
      <ul v-if="cart">
        <li v-for='i in xiangqi.cartInfo' :key='i.id'>
          <img :src="i.productInfo.image" alt="" />
          <div class="lef12">
            <div class="lefy">
              <span>{{ i.productInfo.store_name }}</span>
              <span>X{{ cartno }}</span>
            </div>
            <span class="who">{{ suk }}</span>
            <span class="jia">￥{{ i.productInfo.price }}</span>
          </div>
        </li>
      </ul>
    </div>
    <p class="pna"><van-icon name="service-o" />联系客服</p>
    <div class="die"></div>
    <div class="dingdan">
      <div>
        <span>订单编号:</span>
        <span>{{ xiangqi.order_id }}</span>
      </div>
      <div>
        <span>下单时间:</span>
        <span>{{ time }}</span>
      </div>
      <div>
        <span>订单类型:</span>
        <span>普通订单</span>
      </div>
      <div>
        <span>支付状态</span>
        <span>已支付</span>
      </div>
      <div>
        <span>支付方式</span>
        <span>余额支付</span>
      </div>
    </div>
    <div class="die"></div>
    <div class="dingdan">
      <div>
        <span>支付金额</span>
        <span>￥{{ xiangqi.total_price }}</span>
      </div>
      <div>
        <span>积分抵扣</span>
        <span>-￥0.00</span>
      </div>
      <div>
        <span>运费</span>
        <span>-￥0.00</span>
      </div>
      <p class="dianp">实付款:<span>￥{{ xiangqi.total_price }}</span></p>
    </div>
    <div class="die2"></div>
    <div class="shenqing"><van-submit-bar class="vanbut"  button-text="申请退款"  /></div>
  </div>
</template>
<script>
export default {
  name: "xiangqing",
  data() {
    return {
      xiangqi: [],
      time: null,
      active: 1,
      cartno: null,
      cart: [],
      suk: null,
      leng:null
    };
  },
  created() {
    console.log(this.$route.query.xiang);
    this.$axios
      .get("http://47.115.51.185/api/order/detail/" + this.$route.query.xiang)
      .then((d) => {
        console.log(d.data.data);
        this.xiangqi = d.data.data;
        this.time = d.data.data._add_time;
        this.cartno = this.xiangqi.cartInfo[0].cart_num;
        this.cart = this.xiangqi.cartInfo[0].productInfo;
        this.suk = this.cart.attrInfo.suk;
        this.leng=this.xiangqi.cartInfo.length;
      });
  },
  methods: {},
};
</script>
<style lang='less' scoped>
.die {
  width: 100vw;
  height: 1vh;
  background-color: rgb(245, 245, 245);
}
.top {
  display: flex;
  height: 15vh;
  background-color: #e93323;
  .lef {
    padding: 2vh 6vw;
    width: 17vw;
    height: 9vh;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .rig {
    padding: 3vh 0vw;
    display: flex;
    flex-direction: column;
    span:nth-child(1) {
      //    font-size:17px;
      font-weight: 700;
      color: #fff;
    }
    span:nth-child(2) {
      padding-top: 1vh;
      font-size: 14px;
      color: hsla(0, 0%, 100%, 0.8);
    }
  }
}
.dizhi {
  div {
    display: flex;
    span {
      padding: 2vh 3vw;
    }
  }
  .span {
    padding: 0vh 3vw;
    font-size: 13px;
    color: #868686;
  }
}
.dibu {
  width: 100vw;
  img {
    width: 100%;
  }
}
.deleshang {
  p {
    border-bottom: 1px solid #eee;
    padding-bottom: 2vh;
    padding-left: 3vw;
  }
  ul {
    li {
      display: flex;
      padding: 2vh 4vw;
      border-bottom: 1px solid #eee;
      img {
        width: 20vw;
        height: 100%;
      }
      .lef12 {
        flex: 1;
        display: flex;
        flex-direction: column;
        padding: 0vh 3vw;
        .lefy {
          display: flex;
          justify-content: space-between;
          padding: 1vh 0vw;
          span:nth-child(1) {
            display: block;
            text-overflow: ellipsis;
            overflow: hidden;
            width: 60vw;
            white-space: nowrap;
            color: black;
          }
          span:nth-child(2) {
            font-size: 14px;
            color: #868686;
          }
        }
        .who {
          font-size: 12px;
          color: #868686;
        }
        .jia {
          padding-top: 1vh;
          font-size: 14px;
          color: red;
        }
      }
    }
  }
 
}
.dingdan {
  padding: 3vh 5vw;
  border: 1px solid #eee;
  div {
    display: flex;
    justify-content: space-between;
    padding: 1vh 0vw;
    span:nth-child(2) {
      color: #868686;
      font-size: 14px;
    }
    span:nth-child(1) {
      font-size: 14px;
    }
  }
}
.dianp{
    padding-top: 3vh;
    border-top:1px solid #eee;
    text-align: right;
    span{
        color: red;
    }
}
 .pna {
    text-align: center;
    color: red;
  }
  .die2{
      background-color: rgb(245, 245, 245);
      padding-bottom: 60px;
  }
  
</style>
